<!-- 包含网页标签 -->
<template>
	<!--最外层只能有一个块级元素-->
	<div class="system">
		<!-- 系统内容设置:主题设置,整理收藏等 -->
		<div class="header">
			<!-- 添加蒙版层:背景图片模糊,但文字不模糊 -->
			<div class="mask">
				智能家居可视化管理平台系统设置
			</div>
		</div>
		<!-- 版心:系统设置功能 -->
		<div class="main">
			<div class="nav">
				<!-- 直接跳转 -->
				<a href="/index">返回主页</a>
			</div>
			<!-- 内容 -->
			<div class="wrap">
				<!-- v-for类似于java中的增强型for循环(临时变量与索引 in 数组名) -->
				<div class="content" v-for="pic,i in pics" @click="go">
					<!-- 设置标题 -->
					<h2>
						设置{{i+1}}
					</h2>
					<!-- 显示图片:注意图片地址拼接 -->
					<img :src="`/setting/${pic}.png`">
				</div>
			</div>
		</div>
		<!-- 底部栏 -->
		<Footer/>-
	</div>
</template>
<!-- js代码 -->
<script setup>
import { useRoute, useRouter } from 'vue-router';
// 导入 Footer 组件
import Footer from "../home/footer.vue"; // 修改为默认导入

// 创建路由对象, 接收其它组件传过来的数据
const route = useRoute();
// 创建路由对象, 用于跳转
const router = useRouter();
// 声明图片文件数组
const pics = ['setone', 'settwo', 'setthree'];
// 声明方法
const go = () => {
	alert("帅逼牌电器，你值得拥有！！!");
};
</script>
<!-- 局部样式 -->
<style scoped>  
    /* 最大容器设置为全屏 */  
    .system {  
        height: 100vh;  
        width: 100vw;  
        background-color: lightblue;  
        display: flex;  
        flex-direction: column;  
    }  
  
    .system > .header {  
        height: 35vh;  
        background: url('/pics/setbg.jpg') no-repeat center center;  
        background-size: cover;  
        position: relative;  
    }  
  
    .system > .header > .mask {  
        position: absolute;  
        top: 0;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        background-color: rgba(0, 0, 0, 0.5);  
        color: white;  
        font-size: 2.5vw;  
        text-align: center;  
        z-index: 1;  
    }  
  
    .system > .main {  
        flex: 1;  
        display: flex;  
        flex-direction: column;  
        padding: 10px;  
        box-sizing: border-box;  
    }  
  
    .system > .main > .nav {  
        text-align: right;  
        margin-bottom: 10px;  
    }  
  
    .system > .main > .nav > a {  
        color: darkred;  
        font-size: 1.2vw;  
        text-decoration: none;  
        padding: 5px 10px;  
        border-radius: 5px;  
        transition: background-color 0.3s, color 0.3s;  
    }  
  
    .system > .main > .nav > a:hover {  
        background-color: rgba(255, 255, 255, 0.7);  
        color: darkred;  
    }  
  
    .system > .main > .wrap {  
        display: flex;  
        flex-wrap: wrap;  
        justify-content: space-around;  
    }  
  
    .system > .main > .wrap > .content {  
		/* height: 40vh; */
        width: calc(33.333% - 20px);  
        margin: 10px;  
        box-sizing: border-box;  
        border: 1px solid #ccc;  
        border-radius: 10px;  
        overflow: hidden;  
        text-align: center;  
        transition: transform 0.3s, box-shadow 0.3s;  
    }  
  
    .system > .main > .wrap > .content:hover {  
        transform: translateY(-10px);  
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
    }  
  
    .system > .main > .wrap > .content > h2 {  
        background-color: #f5f5f5;  
        padding: 10px 0;  
        margin: 0;  
        font-size: 1.5vw;  
    }  
  
    .system > .main > .wrap > .content > img {  
        width: 100%;  
        height: auto;  
    }  
  
    /* 响应式设计 */  
    @media (max-width: 768px) {  
        .system > .main > .wrap > .content {  
            width: calc(50% - 20px);  
        }  
    }  
  
    @media (max-width: 480px) {  
        .system > .main > .wrap > .content {  
            width: calc(100% - 20px);  
        }  
  
        .system > .header > .mask {  
            font-size: 4vw;  
        }  
  
        .system > .main > .nav > a {  
            font-size: 2vw;  
        }  
  
        .system > .main > .wrap > .content > h2 {  
            font-size: 3vw;  
        }  
    }  
</style>